<script setup>
  import {ref} from "vue";
  import {ElMessage} from "element-plus";
  import axios from "axios";
  import {useCounterStore} from "@/assets/counter-index.js";
  //定义公共变量
  const gs =useCounterStore();

  const infoForm = ref({});
  const login = () => {
    const info = {...infoForm.value};
    if (!info.username?.trim()){
      ElMessage({message:"请输入用户名",type:"error"})
      return;
    }
    if (!info.password?.trim()){
      ElMessage({message:"请输入密码",type:"error"})
      return;
    }
    axios.post('/account/login',info).then((res)=>{
      const token = res.data;
      //获取共享空间(放导入的最后一行)
      // const gs =useCounterStore();
      gs.isLogin = true;
      gs.token= token;
      //浏览器本地存储
      localStorage.setItem("token",token);
      console.log(res.data);
    }).catch(error=>{
      ElMessage({message:error,type:"error"})
    })
  }
</script>

<template>
  <div class="login">
    <el-input placeholder="请输入用户名" v-model="infoForm.username" style="width: 200px"/>
    <el-input placeholder="请输入密码" v-model="infoForm.password" style="width: 200px"/>
    <div>
      <el-button type="primary" @click="login"> 登录</el-button>
    </div>
  </div>
</template>

<style scoped>
.login{
  width: 500px;
  box-sizing: border-box;
  padding: 4rem;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 5px  rgba(0,0,0,0.5);
}
</style>